﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestingPage.aspx.cs" Inherits="TestingPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Basic usage of the jQuery UI dialog</title>
    <style>
        div.out
        {
            width: 40%;
            height: 120px;
            margin: 0 15px;
            background-color: #D6EDFC;
            float: left;
        }
        div.in
        {
            width: 60%;
            height: 60%;
            background-color: #FFCC00;
            margin: 10px auto;
        }
        p
        {
            line-height: 1em;
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
        rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
        type="text/javascript"></script>
    <script type="text/javascript">
        function GetProductsByCategoryID(categoryID) {
            alert("category " + categoryID);
            PageMethods.GetProducts(categoryID, OnGetProductsComplete);
        }

        function OnGetProductsComplete(result) {
            // Put your logic here to display the result
            alert("result");
        }

        $.fx.speeds._default = 500;
        $(document).ready(function () {
            var $dialog = $('#myDialog')
            .html('You are about to start a war.<br/>Click OK to confirm.  Click Cancel to stop this action.')
            .dialog({
                autoOpen: false,
                title: 'Basic Dialog',
                show: "blind",
                hide: "explode",
                buttons: { "Open Google": function () {
                    $(this).dialog("close");
                    //var elect = document.getElementById("myDialog");
                    //alert(elect.innerHTML);
                    window.open('http://google.com/');
                    return true;
                }, "Close": function () {
                    $(this).dialog("close");
                    return false;
                }
                }
            });

            $('#opener').click(function () {
                return $dialog.dialog('open'); // prevent the default action, e.g., following a link

            });
        }); </script>
</head>
<body>
    <div class="out overout">
        <p>
            move your mouse</p>
        <div class="in overout">
            <p>
                move your mouse</p>
            <p>
                0</p>
        </div>
        <p>
            0</p>
    </div>
    <div class="out enterleave">
        <p>
            move your mouse</p>
        <div class="in enterleave">
            <p>
                move your mouse</p>
            <p>
                0</p>
        </div>
        <p>
            0</p>
    </div>
    <script>
        var i = 0;
        $("div.overout").mouseover(function () {
            $("p:first", this).text("mouse over");
        }).mouseout(function () {
            $("p:first", this).text("mouse out");
            $("p:last", this).text(++i);
        });

        var n = 0;
        $("div.enterleave").mouseenter(function () {
            $("p:first", this).text("mouse enter");
        }).mouseleave(function () {
            $("p:first", this).text("mouse leave");
            $("p:last", this).text(++n);
        });

    </script>
    <button id="opener">
        Open the dialog</button>
    <div id="myDialog" style="display: none;">
        This dialog will show every time!
    </div>
    <form runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />
    <button onclick="GetProductsByCategoryID(1)">
    </button>
    </form>
</body>
</html>